<template>
  <div>
    <el-card>
      <div class="box">
        <img :src="userStore.avatar" alt="" />
        <div class="title">
          <h3>{{ getTime() }}好呀~ {{ userStore.username }}</h3>
          <p>{{ setting.title }}</p>
        </div>
      </div>
    </el-card>
    <!-- 全局的矢量图 -->
    <div class="svg">
      <svg-icon name="welcome" width="500px" height="400px"></svg-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
// 路由守卫已经做过判断和获取信息的方法了  这里就不需要了
// // 引入小仓库  获取用户信息
// import useUserStore from '@/store/modules/user'
// import { onMounted } from 'vue';
// let userStore = useUserStore()
// // 页面挂载后 就展示  // 获取用户信息
// onMounted(() => {
//   userStore.userinfo()
// })

import useUserStore from '@/store/modules/user' // 引入用户信息的小仓库
import { getTime } from '@/utils/time' //封装的判断上下午晚上的
import setting from '@/setting' //项目平台标题

const userStore = useUserStore()
</script>

<style scoped lang="scss">
.box {
  display: flex;
  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  .title {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    h3 {
      font-weight: 800;
      font-size: 30px;
    }
    p {
      color: #cccccc;
    }
  }
}
.svg {
  display: flex;
  justify-content: center;
}
</style>
